import { useCallback, memo } from "react";
import PropsType from "prop-types";
import { TablePagination, Card, Pagination } from '@mui/material';
import './TablePaginationCus.scss'

/**
 * 
 * @param {Number} totalCount 分页的总数
 * @param {Number} currentPage 当前页，请注意！！！！currentPage必须是以1开始
 * @param {Function} onPageChange(event, newPage) 换页触发事件 require
 * @param {Number} rowsPerPage 每页显示的条数
 * @param {Function} onRowsPerPageChange(currentPageSize) 每页显示条数变更的时候触发的事件 require
 * @param {Array} rowsPerPageOptions 每页显示条数的可选数组
 * @returns 
 */
const TablePaginationCus = ({totalCount, currentPage, onPageChange, rowsPerPage, onRowsPerPageChange, rowsPerPageOptions}) => {

  const comOnRowsPerPageChange = useCallback((event) => {
    onRowsPerPageChange(event.target.value)
  }, [onRowsPerPageChange])

  const interPageChange = useCallback((event, page) => {
    onPageChange(event, page)
  }, [onPageChange])
  return (
    <Card className="TablePaginationCus">
      <TablePagination
        component="div"
        count={totalCount}
        page={currentPage - 1}
        onPageChange={interPageChange}
        rowsPerPage={rowsPerPage}
        onRowsPerPageChange={comOnRowsPerPageChange}
        rowsPerPageOptions={rowsPerPageOptions}
      />
      <Pagination
        count={totalCount ? Math.ceil(totalCount / rowsPerPage) : 1}
        page={currentPage}
        onChange={interPageChange}
        showFirstButton
        showLastButton />
    </Card>
  )
}

TablePaginationCus.propTypes = {
  totalCount: PropsType.number,
  currentPage: PropsType.number,
  onPageChange: PropsType.func.isRequired,
  rowsPerPage: PropsType.number,
  onRowsPerPageChange: PropsType.func.isRequired,
  rowsPerPageOptions: PropsType.array
}
// 注意！！！！ currentPage是从1开始的，attention！！！！currentPage is start 1
TablePaginationCus.defaultProps = {
  totalCount: 0,
  currentPage: 0,
  rowsPerPage: 30,
  rowsPerPageOptions: [10, 30, 100]
}

export default memo(TablePaginationCus)